<template>
  <div class='wrapper'>
    <card _Title='用户信息' />
    <Form :model='formItem' :rules='rules' ref='form' :label-width='80'>
      <FormItem label='头像'>
        <Avatar v-if='formItem.header' :src='formItem.header' size='80' />
        <Avatar v-else icon='ios-person' size='80' />
        <Upload :before-upload='OssPolicy' :show-upload-list='false' :on-success='handleSuccess'
                :format="['jpg', 'jpeg', 'png']" :action='action' :data='this.ossBody'>
          <Button class='mt_10'>上传头像</Button>
        </Upload>
      </FormItem>
      <FormItem label='昵称' prop='nickname'>
        <Input class='wrapper-user-name' style='width:187px' v-model='formItem.nickname' placeholder='请输入昵称' />
      </FormItem>

      <FormItem label='生日'>
        <DatePicker type='date' placeholder='选择您的生日' v-model='formItem.birth'></DatePicker>
      </FormItem>
      <FormItem label='性别'>
        <RadioGroup v-model='formItem.gender' type='button' button-style='solid'>
          <Radio :label='1'>男</Radio>
          <Radio :label='0'>女</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem>
        <Button type='primary' @click='save'>确认修改</Button>

      </FormItem>
    </Form>
  </div>
</template>

<script>
import storage from '@/plugins/storage.js';
import { editMemberInfo } from '@/api/account.js';
import { commonUrl } from '@/plugins/request.js';
import * as ApiOss from '@/api/MyApi/Oss';
import * as ApiMember from '@/api/MyApi/Member';
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'Profile',
  data() {
    return {
      rules: { // 验证规则
        nickname: [{ required: true, message: '用户昵称不能为空' }, { max: 16, message: '用户昵称不能超过15个字符' }],
      },
      formItem: {}, // 表单数据
      action: 'https://xmut-mall.oss-cn-hangzhou.aliyuncs.com', // 上传接口 Oss直传
      accessToken: {}, // 验证token
      uploadHeader: {},
      ossBody: {
        policy: '',
        signature: '',
        ossaccessKeyId: '',
        key: '',
        dir: '',
        host: '',
      }, // oss签名上传所需的请求体
    };
  },
  mounted() {
    this.formItem = JSON.parse(localStorage.getItem('userInfo'));
  },
  methods: {
    save() { // 保存
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {
            id: this.formItem.id,
            birthday: this.$options.filters.unixToDate(this.formItem.birthday / 1000, 'yyyy-MM-dd'),
            header: this.formItem.header,
            nickname: this.formItem.nickname,
            sex: this.formItem.sex,
          };
          // editMemberInfo(params).then(res => {
          //   if (res.success) {
          //     this.$Message.success('修改个人资料成功')
          //     storage.setItem('userInfo', res.result)
          //   }
          // })
          ApiMember.editUserInfo(params).then(res => {
            if (res.data.code == 201) {
              this.$Message.success('修改个人资料成功');
              localStorage.setItem('userInfo', JSON.stringify(res.data.obj));
            }
          });
        }
      });
    },
    handleSuccess(res, file) { // 上传成功
      this.$Message.success('上传成功');
      let fileName = this.ossBody.host +
        '/' +
        this.ossBody.key.replace('${filename}', file.name);
      this.$set(this.formItem, 'header', fileName);
    },
    OssPolicy(file) {
      return new Promise((resolve, reject) => {
        ApiOss.policy().then(res => {
          if (res.data.code == 0) {
            this.ossBody.policy = res.data.data.policy;
            this.ossBody.signature = res.data.data.signature;
            this.ossBody.ossaccessKeyId = res.data.data.accessid;
            this.ossBody.dir = res.data.data.dir;
            this.ossBody.key = res.data.data.dir + uuidv4() + file.name;
            this.ossBody.host = res.data.data.host;
            resolve(true);
          } else {
            this.$Message.error('网络拥堵');
            return false;
          }
        }).catch(err => {
          reject(false);
        });
      });
    },
  },

};
</script>

<style scoped lang='scss'>

</style>
